<!--  -->
<template>
  <div id="BAM-orderlist">
    <!-- 头部 -->
    <div class="orderlist-head">
      <nav class="head-top">
        <section class="head-top-left">
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
        </section>
        <section class="head-top-right">
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="query">查询搜索</el-button>
        </section>
      </nav>
      <div class="head-list">
        <ul>
          <li>
            <span>输入搜索:</span>
            <el-input v-model="searchNumber" placeholder="请输入内容"></el-input>
          </li>

          <!-- <li>
            <span>收货人：</span>
            <el-input v-model="serchCondignee" placeholder="收货人姓名/手机号"></el-input>
          </li> -->

          <li>
            <span>提交时间:</span>
            <el-date-picker type="date" v-model="serchUptime" placeholder="请选择时间"></el-date-picker>
          </li>
            <li>
            <span>订单状态:</span>
            <el-autocomplete
              popper-class="my-autocomplete"
              v-model="serchStatus"
              :fetch-suggestions="querySearch"
              placeholder="全部"
              suffix-icon="el-icon-arrow-down"
            >
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
              </template>
            </el-autocomplete>
          </li>
        </ul>
        <!-- <ul> -->
        

          <!-- <li>
                <span>订单分类:</span>
                <el-autocomplete
                  popper-class="my-autocomplete"
                  v-model="serchClassification"
                  :fetch-suggestions="query"
                  placeholder="全部"
                  suffix-icon="el-icon-arrow-down"
                >
                  <template slot-scope="{ item }">
                    <div class="name">{{ item.value }}</div>
                  </template>
                </el-autocomplete>
          </li>-->
        <!-- </ul> -->
      </div>
    </div>
    <!-- 中间 -->
    <div class="orderlist-content">
      <div class="content-top">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
      </div>
      <template class="content-mid">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column type="index" label="编号" width="55" align="center"></el-table-column>
          <el-table-column prop="_id" label="订单编号" align="center" width="180"></el-table-column>
          <el-table-column
            prop="ordertiem"
            label="提交时间"
            width="180"
            align="center"
            :formatter="formatTime"
          ></el-table-column>
          <el-table-column prop="ordername" label="用户账户" width="80" align="center"></el-table-column>
          <el-table-column prop="ordermoney" label="订单金额" width="180" align="center"></el-table-column>
          <el-table-column prop="playmoney" label="支付方式" width="80" align="center"></el-table-column>
          <el-table-column prop="orderstate" label="订单状态" width="120" align="center"></el-table-column>
          <el-table-column label="操作" width="220" align="center">
            <template slot-scope="scope">
              <el-button size="mini">查看订单</el-button>
              <el-button type="danger" size="mini" @click="deleteOrder(scope.row._id)">删除订单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 底部 -->
    <div class="orderlist-food">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="sum"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
const axios = require('axios');
import {formatDate} from  '../../utils/formatDate.js'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      searchNumber: "",
      serchCondignee: "",
      serchUptime: "",
      resStatus: [],
      serchStatus: "",
      serchClassification:'',
      tableData:[],
      id:"0",
      sum:0,
    };
  },
  //监听属性 类似于data概念
  computed: {
   
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    querySearch(queryString, cb) {
      var results =  [
        { value: "待付款" },
        { value: "待发货" },
        { value: "已发货" },
        { value: "已完成" },
        { value: "已支付" },
        { value: "已关闭" },
      ];
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // query(queryString, cb) {
    //   var results = [
    //     { value: "1" },
    //     { value: "1" },
    //     { value: "1" },
    //     { value: "1" },
    //     { value: "1" },
    //   ];
    //   // 调用 callback 返回建议列表的数据
    //   cb(results);
    // },
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
      },
    async handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
    
    this.tableData = await this.refresh(val)
    },
    // 删除订单
    async deleteOrder(id){
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async res=>{
          await  axios.post('http://49.233.65.169:3000/api/deleteorder',{
                              ordernum:id,
                            })
                          .then(function (response) {
                              // console.log(response);
                              return response.data
                          })
                          .catch(function (error) {
                              console.log(error);
                              })
                        this.tableData = await this.refresh();
                        this.sum=await this.refresh(1,'')
        })
    
        
    },
    // 刷新
    async  refresh(pageNum,sum){
      let result  = await  axios.post('http://49.233.65.169:3000/api/orderlist',{
      pageSize:5,
      pageNum:pageNum
    })
    // console.log(result);
    if(sum!=null){
      return result.count
    }
    return result.data
    },
    // 重置
    reset(){
      this.searchNumber='';
      this.serchCondignee='';
      this.serchUptime='';
      this.serchStatus='';
      this.serchClassification=''
    },
    // 转换时间类型
     formatTime(row, column) {
        let time = row[column.property] * 1000
        let date = new Date(time)
        // console.log(new Date(time))
        return formatDate(date, 'yyyy-MM-dd hh:mm')
      },
      // 查询
     async query(){
        if(this.searchNumber&&this.serchStatus){
              // console.log(this.searchNumber);
           
          let cx= await axios.post('http://49.233.65.169:3000/api/queryorder',{
            state :this.serchStatus,
           num :this.searchNumber,
          })
          let data=[];
          data.push(cx.result);
          this.tableData=data;
          // console.log(cx);
        }
        else if(this.searchNumber){
          // console.log(this.searchNumber);
           let cx= await axios.post('http://49.233.65.169:3000/api/queryorder',{
            num :this.searchNumber,
            
          })  
          // console.log(cx);
          // console.log('------------');
          let data=[];
          data.push(cx.result);
          this.tableData=data;
          // console.log(cx);
         
        }
        else if(this.serchStatus){
           let cx= await axios.post('http://49.233.65.169:3000/api/queryorder',{
             state :this.serchStatus,
            
          }
          )
          // console.log(cx);
          this.tableData=cx.stat;
          // console.log(cx.stat);
          // console.log(this.tableData);
        
        }
         else{
           this.$message({
          message: '请输入内容再查询',
          type: 'warning'
        });
          }
      }
      },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
    async  mounted() {
    // this.resStatus = this.StatusAll();
    this.tableData = await this.refresh();
    this.sum=await this.refresh(1,'')
    
    //     axios.post('http://49.233.65.169:3000/api/orderadd',{
    //   ordername:'123',
    //   ordernum:'123123',
    //   ordermoney:'1000',
    //   orderstate:'已关闭',
    //   playmoney:'支付宝',
    //   ordertiem:'2596504999'
    // }).then((data) =>{
    //    console.log(data)
    // }).catch((error) =>{
    //   console.log(error)
    // })

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less'  scoped>
#BAM-orderlist {
  padding: 20px;
}
.orderlist-head {
  margin-bottom: 20px;
  border: 1px solid #cccccc;
  padding: 20px;
  nav.head-top {
    display: flex;
    justify-content: space-between;
    .head-top-left {
      i.el-icon-search::before {
        width: 16px;
        height: 16px;
      }

      span {
        font-size: 16px;
        line-height: 16px;
      }
    }

    .head-top-right {
      el-button {
      }
    }
  }
  .head-list {
    width: 100%;
    ul {
      height: 50px;
      > li {
        float: left;
        width: 260px;
        display: flex;
        justify-content: space-between;
        padding: 5px;
        margin-right: 20px;
        span {
          width: 80px;
          line-height: 36px;
        }
      }
    }

    .my-autocomplete {
      li {
        line-height: normal;
        padding: 7px;

        .name {
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      i {
        display: block;
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
.orderlist-content {
  .content-top {
    border: 1px solid #cccccc;
    padding: 20px;
    height: 58px;
    margin-bottom: 20px;
    i.el-icon-tickets {
    }

    span {
    }
  }
  .content-mid {
    el-table-column {
      text-align: center;
    }
  }
}
.orderlist-food {
  display: flex;
  justify-content: flex-end;
}
</style>